<html>
<head>
<title>ARIA roles simple tests</title>
<style>
    .newRole {
        border: 2px solid blue;
        background-color: lightblue;
    }
</style>
</head>
 
<body>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function validateRole(aria, real, result) {
        if (!window.accessibilityController)
            return;

        var axElement = accessibilityController.accessibleElementById(aria.id);
        if (!axElement) {
            result.innerText = "ERROR: could not retrieve element " + aria.id;
            return;
        }
        var ariaRole = axElement.role;

        axElement = accessibilityController.accessibleElementById(real.id);
        if (!axElement) {
            result.innerText = "ERROR: could not retrieve element " + real.id;
            return;
        }
        var realRole = axElement.role;

        if (ariaRole == realRole)
            result.innerText = "This test PASSES in DumpRenderTree. The role is " + ariaRole;
        else
            result.innerText = "This test FAILS in DumpRenderTree. The ARIA role is " + ariaRole + ", but the real role is "
                + realRole;
    }
</script>

  <!--Checkbox-->
  <div class="newRole">
    <p>The following should be a checkbox:</p>
    <p><span role="checkbox" id="ariaCheckBox">X</span></p>
    <p>Actual checkboxes:</p>
    <form>
        <input type="checkbox" name="broccoli" id="realCheckBox">Broccoli<br>
        <input type="checkbox" name="asparagus">Asparagus<br>
    </form>
    <span id="resultCheckBox"></span>
    <script>
        validateRole(document.getElementById('ariaCheckBox'),
            document.getElementById('realCheckBox'),
            document.getElementById('resultCheckBox'));
    </script>
  </div>
  <br/>
  
  <!--Button-->
  <div class="newRole">
    <p>The following should be a button:</p>
    <p><span role="button" id="ariaButton">X</span></p>
    <p>Actual button:</p>
    <button id="realButton">Hello</button>
    <span id="resultButton"></span>
    <script>
        validateRole(document.getElementById('ariaButton'),
            document.getElementById('realButton'),
            document.getElementById('resultButton'));
    </script>
  </div>
  <br/>

  <!--Heading-->
  <div class="newRole">
    <p>The following should be a heading:</p>
    <p><span role="heading" id="ariaHeading">X</span></p>
    <p>Actual heading:</p>
    <h1 id="realHeading">Hello</h1>
    <span id="resultHeading"></span>
    <script>
        validateRole(document.getElementById('ariaHeading'),
            document.getElementById('realHeading'),
            document.getElementById('resultHeading'));
    </script>
  </div>
  <br/>
    
  <!--Link-->
  <div class="newRole">
    <p>The following should be a link:</p>
    <p><span role="link" id="ariaLink">X</span></p>
    <p>Actual link:</p>
    <a href="/" id="realLink">Hello</a>
    <span id="resultLink"></span>
    <script>
        validateRole(document.getElementById('ariaLink'),
            document.getElementById('realLink'),
            document.getElementById('resultLink'));
    </script>
  </div>
  <br/>

  <!--Radio-->
  <div class="newRole">
    <p>The following should be a radio button:</p>
    <p><span role="radio" id="ariaRadio">X</span></p>
    <p>Actual radio buttons:</p>
    <form>
        <input type="radio" name="broccoli" id="realRadio">Broccoli<br>
        <input type="radio" name="asparagus">Asparagus<br>
    </form>
    <span id="resultRadio"></span>
    <script>
        validateRole(document.getElementById('ariaRadio'),
            document.getElementById('realRadio'),
            document.getElementById('resultRadio'));
    </script>
  </div>
  <br/>

  <!--Textbox-->
  <div class="newRole">
    <p>The following should be a text box:</p>
    <p><span role="textbox" id="ariaTextBox">X</span></p>
    <p>Actual text box:</p>
    <input type="text" id="realTextBox"></input>
    <span id="resultTextBox"></span>
    <script>
        validateRole(document.getElementById('ariaTextBox'),
            document.getElementById('realTextBox'),
            document.getElementById('resultTextBox'));
    </script>
  </div>
  <br/>
  
  <!--Image-->
  <div class="newRole">
    <p>The following should be an image:</p>
    <p><span role="img" alt="Hello" id="ariaImage">X</span></p>
    <p>Actual image:</p>
    <img src="resources/cake.png" alt="Giant cupcake" id="realImage"></img>
    <span id="resultImage"></span>
    <script>
        validateRole(document.getElementById('ariaImage'),
            document.getElementById('realImage'),
            document.getElementById('resultImage'));
    </script>
  </div>
  <br/>
  
  <!--List-->
  <div class="newRole">
    <p>The following should be a list:</p>
    <p><span role="list" id="ariaList">X</span></p>
    <p>Actual list:</p>
    <ul id="realList">
        <li>Broccoli</li>
        <li>Beets</li>
    </ul>
    <span id="resultList"></span>
    <script>
        validateRole(document.getElementById('ariaList'),
            document.getElementById('realList'),
            document.getElementById('resultList'));
    </script>
  </div>
  <br/>

  <!--Dialog -->
  <div class="newRole">
    <p>The following should be a dialog:</p>
    <p><span role="dialog" id="ariaDialog">X</span></p>
    <p>Actual dialog:</p>
    <dialog id="realDialog" open>Hello.</dialog>
    <span id="resultDialog"></dialog>
    <script>
        validateRole(document.getElementById('ariaDialog'),
            document.getElementById('realDialog'),
            document.getElementById('resultDialog'));
    </script>
  </div>

 </body>
</html>
